<template functional>
  <el-card class="service-type">
    <div slot="header" class="clearfix el-card-title">
      <span>服务类型</span>
    </div>
    <div class="card-cont service_type-cont">
      <p class="hint-tit">已为你开通的服务</p>
      <el-row type="flex" :gutter="20" class="serv-list">
        <el-col>
          <div class="have-serv serv-item">
            数字资产基础发航服务
          </div>
        </el-col>
        <el-col>
          <div class="mode-serv serv-item">更多服务</div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'ServiceType'
}
</script>
<style lang="scss" scoped>
.service_type-cont {
  .hint-tit {
    margin-top: 0;
    margin-bottom: 16px;
  }
  .serv-list {
    display: flex;
    .serv-item {
      line-height: 48px;
      text-align: center;
      background-color: #f0f0f0;
      color: #333;
      border: 1px solid #f0f0f0;
    }
    .mode-serv {
      border-color: 666;
      background-color: #fff;
    }

    // have-serv
    // mode-serv
  }
}
</style>
